<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/favicon.ico">
    <title>朋友圈</title>
    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <style>
        body{
            background-image: url("/avatar/myfabubg.jpg");
            background-repeat: no-repeat;
            background-size:100%;
        }

        .fabukuang2{
            margin-top: 70px;
            margin-bottom: 20px;
        }

        h4{
            margin-top: -20px;
        }
        .content{
            margin-bottom: 10px;
            border-radius:5px;
        }
        .icon{
            margin-top: 10px;
            margin-left: 10px;
            height: 35px;
            width:35px;
            float: left;
        }
        .content p{
            float: left;
            margin-top: 17px;
            margin-left: 10px;
        }
    </style>
</head>

<body>

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" style="background: #91C4C7">

    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">朋友圈</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li ><a href="/">全部动态</a></li>
                <li class="active"><a>我的发布</a></li>
            </ul>

        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-10 fabukuang2">
            <img style="width: 100%;height: 220px" src="/avatar/wodefabu.jpg" alt="">
        </div>

    </div>


    <div class="row" id="app">
        <div style="background:white;height: 150px;" class="col-md-10 content" v-for="item in result">
            <div style="height: 60px">
                <img :src='item.avatar' class="icon" alt="">
                <p>{{item.username}}</p>
                <img src='/avatar/renzheng.png' style="margin-top: 14px;margin-left: 10px" alt="">
            </div>
            <div style="margin-left: 45px;margin-top: -30px">
                <p>{{item.content}}</p>
            </div>
        </div>

    </div>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script  src="/js/jquery-1.11.3.min.js"></script>
<script  src="/js/vue.min.js"></script>
<script  src="/js/bootstrap.min.js"></script>
<script type="text/javascript">

    function getContentList() {
        $.get("/getmyfabu", function(result){
            new Vue({
                el: '#app',
                data: {
                    result:result.result
                }
            });
        });
    }
    getContentList();

</script>
</body>
</html>
